<template>
	<div class="mod-prod-info">
		<el-form :model="dataForm" ref="dataForm" label-width="100px">
			<el-form-item label="产品图片">
				<mul-pic-upload v-model="dataForm.imgs" />
			</el-form-item>
			<el-form-item label="状态">
				<el-radio-group v-model="dataForm.status">
					<el-radio :label="1">上架</el-radio>
					<el-radio :label="0">下架</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="产品分类" prop="categoryId" :rules="[{ required: true, message: '产品分类不能为空'}]">
				<el-col :span="8">
					<el-cascader expand-trigger="hover" :options="category.list" :props="category.props"
						v-model="category.selected" @change="handleCategoryChange"></el-cascader>
				</el-col>
			</el-form-item>
			<!--  <el-form-item label="商店分类" prop="shopId" :rules="[{ required: true, message: '商店分类不能为空'}]">
	    <el-col :span="8">
	    <el-select v-model="dataForm.shopId"  style="width: 250px" placeholder="请选择">
	      <el-option
	        v-for="item in this.data"
	        :key="item.shopId"
	        :label="item.shopName"
	        :value="item.shopId"
	      ></el-option>
	    </el-select>
	    </el-col>
	  </el-form-item> -->
			<el-form-item label="产品分组" prop="tagList" :rules="[{ required: true, message: '产品分组不能为空'}]">
				<el-col :span="8">
					<el-select v-model="dataForm.tagList" multiple style="width: 250px" placeholder="请选择">
						<el-option v-for="item in this.tags" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-col>
			</el-form-item>
			<el-form-item label="自购比率" prop="selfBuyProfit" :rules="[{ required: true, message: '产品自购比率不能为空'}]">
				<el-col :span="8">
					<el-input v-model="dataForm.selfBuyProfit" type="number" controls-position="right" label="分类名称">
					</el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="上级比率" prop="upProfit" :rules="[{ required: true, message: '产品上级比率不能为空'}]">
				<el-col :span="8">
					<el-input v-model="dataForm.upProfit" type="number" controls-position="right" label="分类名称">
					</el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="分享比率" prop="shareProfit" :rules="[{ required: true, message: '产品分享比率不能为空'}]">
				<el-col :span="8">
					<el-input v-model="dataForm.shareProfit" type="number" controls-position="right" label="分类名称">
					</el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="产品名称" prop="prodName" :rules="[{ required: true, message: '产品名称不能为空'}]">
				<el-col :span="8">
					<el-input v-model="dataForm.prodName" placeholder="产品名称" maxlength="50"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="产品卖点" prop="brief">
				<el-col :span="8">
					<el-input v-model="dataForm.brief" type="textarea" :autosize="{minRows: 2, maxRows: 4}"
						placeholder="产品卖点"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="配送方式">
				<el-checkbox v-model="dataForm.deliveryMode.hasShopDelivery">商家配送</el-checkbox>
				<el-checkbox v-model="dataForm.deliveryMode.hasUserPickUp">用户自提</el-checkbox>
			</el-form-item>
			<prod-transport v-show="dataForm.deliveryMode.hasShopDelivery" v-model="dataForm.deliveryTemplateId">
			</prod-transport>
			<sku-tag ref="skuTag" :skuList="dataForm.skuList" @change="skuTagChangeSkuHandler"></sku-tag>
			<sku-table ref="skuTable" v-model="dataForm.skuList" :prodName.sync="dataForm.prodName"></sku-table>

			<el-form-item label="产品详情" prop="content">
				<tiny-mce v-model="dataForm.content" ref="content" style="width:1000px"></tiny-mce>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
				<el-button type="info" @click="quxiao()">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		treeDataTranslate,
		idList
	} from "@/utils";
	import MulPicUpload from "@/components/mul-pic-upload";
	import ProdTransport from "./prod-transport";
	import SkuTag from "./sku-tag";
	import SkuTable from "./sku-table";
	import TinyMce from "@/components/tiny-mce";

	export default {
		data() {
			return {
				// 分类树展示与回显
				category: {
					list: [],
					selected: [],
					props: {
						value: "categoryId",
						label: "categoryName"
					}
				},
				// 规格列表
				dataForm: {
					prodName: "",
					brief: "",
					pic: "",
					imgs: "",
					categoryId: "",
					prodId: 0,
					skuList: [

					],
					tagList: [],
					content: "",
					status: 1,
					deliveryMode: {
						hasShopDelivery: true,
						hasUserPickUp: false
					},
					deliveryTemplateId: 47,
					selfBuyProfit: '', //自购比率
					shareProfit: '', //分享比率
					upProfit: '', //上级比率
				},

				tags: [],
				resourcesUrl: window.SITE_CONFIG.resourcesUrl,
				data: '',
			};
		},
		components: {
			MulPicUpload,
			ProdTransport,
			TinyMce,
			SkuTag,
			SkuTable
		},
		computed: {
			defalutSku() {
				return this.$store.state.prod.defalutSku;
			}
		},
		activated() {
			this.dataForm.prodId = this.$route.query.prodId;
			this.getDataList();
			this.getshopDetail()
		},
		methods: {
			// 获取分类数据
			getDataList() {
				this.getTagList();
				this.getCategoryList().then(() => {
					if (this.dataForm.prodId) {
						// 获取产品数据
						this.$http({
							url: this.$http.adornUrl(`/prod/prod/info/${this.dataForm.prodId}`),
							method: "get",
							params: this.$http.adornParams()
						}).then(({
							data
						}) => {
							console.log("我要修改");

							console.log(data);

							this.dataForm = data;
							this.dataForm.deliveryMode = JSON.parse(data.deliveryMode);
							this.$refs.skuTag.init(data.skuList);
							this.$refs.skuTable.init();
							this.category.selected = idList(
								this.category.list,
								this.dataForm.categoryId,
								"categoryId",
								"children"
							).reverse();
							this.dataForm.tagList = data.tagList;
						});
					} else {
						this.$nextTick(() => {
							this.$refs["dataForm"].resetFields();
							this.$refs.skuTag.init();
							this.dataForm.pic = "";
							this.dataForm.imgs = "";
						});
					}
				});
			},
			// 获取分类信息
			getCategoryList() {
				return this.$http({
					url: this.$http.adornUrl("/prod/category/listCategory"),
					method: "get",
					params: this.$http.adornParams()
				}).then(({
					data
				}) => {
					this.category.list = treeDataTranslate(data, "categoryId", "parentId");
				});
			},
			// 选择分类改变事件
			handleCategoryChange(val) {
				console.log(val);
				this.dataForm.categoryId = val[val.length - 1];
				let res = this.category.list.filter(item => {
					return item.categoryId == val[0]
				})
				this.dataForm.selfBuyProfit= res[0].selfBuyProfit //自购比率
				this.dataForm.shareProfit= res[0].shareProfit //分享比率
				this.dataForm.upProfit= res[0].upProfit //上级比率
			},
			// 表单提交
			dataFormSubmit() {
				this.$refs["dataForm"].validate(valid => {
					if (!valid) {
						return;
					}
					if (!this.dataForm.imgs) {
						this.errorMsg("请选择图片上传");
						return;
					}
					if (!this.dataForm.deliveryMode) {
						this.errorMsg("请选择配送方式");
						return;
					}
					let param = Object.assign({}, this.dataForm);
					// 设置价格和库存
					this.paramSetPriceAndStocks(param);

					param.deliveryMode = undefined;
					param.deliveryModeVo = this.dataForm.deliveryMode;
					// 商品主图
					param.pic = this.dataForm.imgs.split(",")[0];

					console.log("可以提交");
					console.log(this.dataForm);

					this.$http({
						url: this.$http.adornUrl(`/prod/prod`),
						method: param.prodId ? "put" : "post",
						data: this.$http.adornData(param)
					}).then(({
						data
					}) => {
						this.$message({
							message: "操作成功",
							type: "success",
							duration: 1500,
							onClose: () => {
								this.visible = false;
								this.$store.commit("common/removeMainActiveTab");
								this.$router.push({
									name: "prod-prodList"
								});
								this.$emit("refreshDataList");
							}
						});
					});
				});
			},
			quxiao() {
				this.$router.push({
					name: "prod-prodList"
				});
			},
			paramSetPriceAndStocks(param) {
				// 获取规格属性信息
				// param.skuList = this.$refs.prodSpec.getTableSpecData()
				// 商品库存
				param.totalStocks = 0;
				// 商品价格
				param.price = 0;
				// 商品原价
				param.oriPrice = 0;
				// 商品实际库存
				for (let i = 0; i < param.skuList.length; i++) {
					const element = param.skuList[i];
					if (element.status !== 1) {
						continue;
					}
					if (param.price === 0) {
						param.price = element.price ? Number.parseFloat(element.price) : 0;
					}
					// 商品价格为最低价的那件商品的价格
					param.price = Math.min(param.price, element.price);
					if (param.price === element.price) {
						param.oriPrice = element.oriPrice ?
							Number.parseFloat(element.oriPrice) :
							0;
					}
					param.totalStocks += element.stocks ?
						Number.parseInt(element.stocks) :
						0;
				}
				// 如果sku没有商品名称，则使用商品的商品名称
				if (param.skuList.length === 1) {
					param.skuList[0].prodName = this.dataForm.prodName;
				}
			},
			skuTagChangeSkuHandler(skuList) {
				console.log('选择');
				console.log(skuList);
				const prodName = this.dataForm.prodName;
				skuList.forEach(sku => {
					if (sku.properties) {
						sku.skuName = "";
						let properties = sku.properties.split(";");
						for (const propertiesKey in properties) {
							sku.skuName += properties[propertiesKey].split(":")[1] + " ";
						}
						sku.prodName = prodName + " " + sku.skuName;
					}
				});
				this.dataForm.skuList = skuList;
			},
			errorMsg(message) {
				this.$message({
					message: message,
					type: "error",
					duration: 1500
				});
			},
			// 获取所有的分组信息
			getTagList() {
				this.$http({
					url: this.$http.adornUrl("/prod/prodTag/listTagList"),
					method: "get",
					params: this.$http.adornParams()
				}).then(({
					data
				}) => {
					this.tags = data;
				});
			},
			getshopDetail() {
				this.$http({
					url: this.$http.adornUrl("/shop/shopDetail/listShopName"),
					method: "get",
					params: this.$http.adornParams()
				}).then(({
					data
				}) => {
					this.data = data;
					console.log(data);
				});
			}

		}
	};
</script>
